<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Bourbon Neat</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="css/desktop.css" media="(min-width:40em)">

    <!--[if (lt IE 9) & (!IEMobile)]>
    <link rel="stylesheet" href="css/ie.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
    <noscript><link rel="stylesheet" href="../css/mobile.css"></noscript>
    <![endif]-->
    {% include segment.html %}
  </head>

  <body>
    <nav class="bourbon">
      <ul>
        <li><a href="http://bourbon.io" class="bourbon">Bourbon</a></li>
        <li><a href="http://neat.bourbon.io" class="neat current">Neat</a></li>
        <li><a href="http://bitters.bourbon.io" class="bitters">Bitters</a></li>
        <li><a href="http://refills.bourbon.io" class="refills">Refills</a></li>
      </ul>
      <h1>All maintained by the design team at <a href="http://thoughtbot.com">thoughtbot</a></h1>
    </nav>

    <header>
      <div class="header-content">
        <div class="logo">
          <a href="/"><img src="images/logotype.svg" alt="Bourbon Neat Logo" /></a>
        </div>

        <nav class="buttons">
          <a href="https://github.com/thoughtbot/neat" class="button github">
            <img src="/images/github.png" />
            Github
          </a>
          <a href="/examples/" class="button secondary">Examples</a>
          <a href="http://thoughtbot.github.io/neat-docs/latest/" class="button docs">Docs</a>
        </nav>
      </div>
    </header>
    {{ content }}
  </body>

</html>
